<template>
    <div>
        <div class="filter-container">
            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
            </el-date-picker>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品编码" v-model="listQuery.goodsNo" clearable>
            </el-input>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品名称" v-model="listQuery.name" clearable>
            </el-input>
            <el-select clearable class="male filter-item" style="width: 160px" v-model="listQuery.status" placeholder="入库状态">
                <el-option v-for="item in typeOptions" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-button class="filter-item male" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </div>
         <div class="container">
             <span class="tipTitle">入库仓库</span>
            <el-select clearable class="male filter-item" style="width: 250px" v-model="depotId" placeholder="请选择仓库" @change="choice(depotId)" >
                <el-option v-for="(item,index) in columndata" :key="index" :label="item.depotName" :value="item.id" ></el-option>
            </el-select>
            <el-select clearable class="male filter-item" style="width: 250px" v-model="areaId" placeholder="请选择货位" @change="xuanze(areaId)">
                <el-option v-for="(item,index) in column2data" :key="index" :label="item.areaName" :value="item.id" ></el-option>
            </el-select>
            <span class="tip">可存放余量：{{num}}</span>
            <el-button class="filter-item male" type="primary" icon="el-icon-plus" @click="warehouse">入库</el-button>
        </div>
        <el-table :data="list" v-loading="listLoading" border fit highlight-current-row style="100%" @selection-change="changeFun">
            <el-table-column
                align="center"
                type="selection"
                width="40">
                </el-table-column>
            <el-table-column align="center" label="序号" width="85" type="index" >

            </el-table-column>
            <el-table-column align="center" label="添加商品时间">
                <template slot-scope="scope">
                <span class="text">{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品编码">
                <template slot-scope="scope">
                <span class="text">{{scope.row.goodsNo}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称">
                <template slot-scope="scope">
                <span class="text">{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="计量单位">
                <template slot-scope="scope">
                <span class="text">{{scope.row.unit}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="ID">
                <template slot-scope="scope">
                <span class="text">{{scope.row.goodsId}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="入库状态">
                <template slot-scope="scope">
                    <span v-html="scope.row.status==0?'未入库':'已入库'"></span>
                </template>
            </el-table-column>
           
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
        :current-page="listQuery.currentPage" 
        :page-sizes="[10,20,50,100,200,500,1000,2000,5000]" 
        :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>
<script>
import { parseTime } from '../../api/time.js'
export default {
   data() {
    return {
      list: null,
      total: 0,
      depotId: '',
      areaId: '',
      sid:'',
      zt: '',
      num: '0',
      id: '',
      listLoading: false,
      listQuery: {
        status: '',
        goodsNo: this.$route.query.goodsNo,
        startTime: '',
        endTime: '',
        name: '',
        currentPage: 1,
        pageSize: 10
      },
      columndata: '',
      column2data: '',
      dateRange: '',
      typeOptions: [
        {
          label: '已入库',
          key: '1'
        },
        {
          label: '未入库',
          key: '0'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getList()
    this.getColumn()
  },
   watch: {
    dateRange: function() {
      if (this.dateRange === null) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.dateRange[0])
        this.listQuery.endTime = parseTime(this.dateRange[1])
      }
    }
  },
  methods: {
    changeFun(val) {
      this.sid = ''
      this.zt = ''
      var arr = []
      var arr2 =[]
      for (var i = 0; i < val.length; i++) {
        arr[i] = val[i].goodsId
        arr2[i] = val[i].status
      }
      // console.log(this.arr.toString)
      for (var j = 0; j < arr.length; j++) {
        this.sid = this.sid + arr[j] + ','
        
      }
      for (var k = 0; k < arr2.length; k++) {
            if(arr2[k] == 1){
                this.zt = 1
                // return
            }
      }
     
      console.log(this.sid)
      console.log(this.zt)
    },
    warehouse(){
    var that = this
   
      that.$post({
            api: "/in/inIdsList",
            data: {
                areaId: that.areaId,
                ids: that.sid
            }
        }).then(({ data }) => {
        if(data.code === 0){
           that.getList()
            if(that.zt == 1){
                 that.$alert('所选商品中含有已入库商品', '提示', {
                 dangerouslyUseHTMLString: true
            });
            return
         }
           that.xuanze(that.id);
           that.$notify({
                title: '成功',
                message: '入库成功',
                type: 'success',
                duration: 2000
            })
        }else{
            if(that.zt == 1){
                 that.$alert('所选商品中含有已入库商品', '提示', {
                 dangerouslyUseHTMLString: true
            });
            return
         }
            that.$message({
                  type: "error",
                  message: data.msg
                });
        }
        console.log("getInComingList",data)
        });
    },
    choice(id) {
       var that = this
       that.areaId = ''
      that.$post({
            api: "/depot/get/getDepotAreaSelect",
            data: {
                depotId: id
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.column2data = data.data
        }
        console.log("getDepotAreaSelect",data)
        });
    },
    xuanze(id){
      var that = this
      that.id = id
      that.$post({
            api: "/depotArea/getReleaseArea",
            data: {
                id: id
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.num = data.data
        }
        console.log("getReleaseArea",data)
        });
    },
     getList(){
      var that = this
      that.$post({
            api: "/in/getInComingList",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("getInComingList",data)
        });
    },
    getColumn(){
      var that = this
      that.$post({
            api: "/depot/get/getDepotSelect",
        }).then(({ data }) => {
        if(data.code === 0){
            that.columndata = data.data
        }
        console.log("getDepotSelect",data)
        });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
     
    },
    handleRemove(row) {
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
     margin: 30px 0;
     .tipTitle{
         margin-right: 10px;
     }
    .tip{
        margin: 0 30px;
    }
}
</style>

